<template>
	<view>
		<download-btn :dwnSrc="dwnSrc"></download-btn>
		<GlobalSlot>
			<view slot="funcExampleDetail">
				<jkNavTab ref="navTab" :tabTitle="navData" :showNum="showNum" @changeTab='changeTab'></jkNavTab>
			</view>
			
			<view slot="funcIntroDetail">
				<p><label class="iconfont icon-pass"> </label>切换tab</p>
			</view>
			
			<view slot="paramDetail">
				<view class="flexRowNoWrap param-table-row">
					<view class="col1"><label class="color-primary">*</label>navData</view>
					<view class="col2">导航栏数据</view>
					<view class="col3">array</view>
					<view class="col4">['选择一','选择二','选择三','选择四','选择五','选择六','选择七','选择八','选择九']</view>
					<view class="col5">暂无数据</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1"><label class="color-primary">*</label>showNum</view>
					<view class="col2">一个屏幕展示tab的个数</view>
					<view class="col3">number</view>
					<view class="col4">--</view>
					<view class="col5">5</view>
				</view>
			</view>
			
			<view slot="callFuncDetail">
				<view class="flexRowNoWrap param-table-row">
					<view class="col6">changeTab</view>
					<view class="col7">index:每个tab的index值</view>
					<view class="col8">切换tab回调事件</view>
				</view>
			</view>
			
			<view slot="directorInfo">
				周子琪 2021年3月22日
			</view>
			
			<view slot="versionInfo">
				----v1.0 周子琪 2021年3月22日 完成组件基本功能
			</view>
			
			<view slot="projectName">
				暂无
			</view>
			
			<view slot="terminalName">
				H5端、微信小程序端
			</view>
			
			<view slot="otherInfo">
				注意引入此组件时需要在App.vue页面全局设置自定义滚动条属性
				::-webkit-scrollbar {
				  width: 0;
				  height: 0;
				  color: transparent;
				}
			</view>
		</GlobalSlot>
	</view>
</template>

<script>
	import jkNavTab from '../../../components/jk-navTab/jk-navTab.vue'
	export default {
		components: {jkNavTab},
		data() {
			return {
				dwnSrc:'jk-navTab',
				navData:['选择一','选择二','选择三','选择四','选择五','选择六','选择七','选择八','选择九'],//导航栏数据
				showNum:6,//展示个数
			}
		},
		methods: {
			changeTab(index){
				console.log(index);
			}
		}
	}
</script>

<style>

</style>
